// 配置索引li展示图indexof,获取鼠标悬停在某个位置

// 获取到所有滑动门内容详情的元素，元素的集合
var nav_list_yes_uls=document.getElementsByClassName("nav-detail-list");

// 获取到所有鼠标悬停的元素 元素的集合
var li_As=document.querySelectorAll(".yes-list>li>a");


// 对所有的li中的a元素添加事件监听,监听鼠标悬停在那个li上
for(var i=0;i<li_As.length;i++){
    li_As[i].addEventListener("mouseover",function(event){
        // 获取当前鼠标悬停的元素 this
        var li_a=event.target;
        // 将元素集合转成数组
        var list_li_as=Array.from(li_As);
        // 通过数组indexOf方法获取当前鼠标悬停的元素在数组中的索引
        var index=list_li_as.indexOf(li_a);

        // 修改对应层叠出来的样式的显示度
        // 先将滑动门集合每次显示出来都要初始化为0
        for(var i=0;i<nav_list_yes_uls.length;i++){
            nav_list_yes_uls[i].style.opacity=0;
        }
        // 在当前鼠标悬停的元素索引对应的层叠出来的样式显示度改为1
        nav_list_yes_uls[index].style.opacity=1;
    })

}



// 搜索按钮与鼠标识别到位置要改变颜色同时绑定出现效果
var btn= document.getElementById("search-btn");
var input= document.getElementById("search-input");

btn.addEventListener("mouseover",function(){
    document.getElementById("search-input").style.borderColor="#ff6a00";
})

btn.addEventListener("mouseleave",function(){
    document.getElementById("search-input").style.borderColor="#e0e0e0";
})

//对搜索框进行监听
input.addEventListener("mouseover",function(){
    input.style.borderColor="#ff6a00";
})

input.addEventListener("mouseleave",function(){
    input.style.borderColor="#e0e0e0";
})

//搜索框显示
var search_list_text=['小米手机','小米笔记本' ,'热水器'];
var search_index=0;
setInterval(function(){ 
    search_index++;
    input.placeholder=search_list_text[search_index%search_list_text.length];
},3000)
